<template>
    <!-- 放款管理 -->
    <div>
        <div class="fksh">
            <p>还款管理</p>
            <h3>还款登记</h3>
            <!-- 借款人信息 -->
            <el-descriptions title="借款人信息" :column="2" border>
                <el-descriptions-item v-for="item, index in data" :label=item.name label-align="left" align="center">
                    <input type="text" style="width: 100%;border: none;">
                </el-descriptions-item>
            </el-descriptions>
            <!-- 评分结果 -->
            <el-descriptions title="评分结果" :column="2" border>
                <el-descriptions-item v-for="item, index in data1" :label=item.name label-align="left" align="center">
                    <input type="text" style="width: 100%;border: none;">
                </el-descriptions-item>
            </el-descriptions>
            <!-- 按钮 -->
            <span class="dialog-footer">
                <el-button @click=fanhui><el-icon>
                        <ArrowLeftBold />
                    </el-icon>返回</el-button>
                <el-button>保存</el-button>
                <el-button type="primary">提交</el-button>
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const data = [
    {
        name: '贷款业务编号'
    },
    {
        name: '客户名称'
    },
    {
        name: '借款金额(小写)'
    },
    {
        name: '借款金额(大写)'
    },
    {
        name: '期限'
    },
]
const data1 = [
    {
        name: '本期还款日期'
    },
    {
        name: '还款期次'
    },
    {
        name: '应还本金'
    },
    {
        name: '应还利息'
    },
    {
        name: '应还罚息'
    },
    {
        name: '本期应还总额'
    },
    {
        name: '实际还款日期'
    },
]

const fanhui = () => {
    router.go(-1)
}

</script>

<style scoped>
p {
    background-color: rgb(78, 171, 254);
    color: #fff;
    width: 200px;
    height: 40px;
    border-radius: 50px;
    text-align: center;
    line-height: 40px;
}

.fksh {
    height: 100%;
}

.dialog-footer {
    text-align: right;
    display: inline-block;
    width: 100%;
    padding: 20px 0;
}

input:focus-visible {
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px transparent;
    border-bottom: 1.3px solid gainsboro;
}
</style>